<template>
  <form-item-wrapper
    :designer="designer"
    :field="field"
    :rules="rules"
    :design-state="designState"
    :parent-id="parentId"
    :parent-list="parentList"
    :index-of-parent-list="indexOfParentList"
  >
    <div v-if="previewStatus" class="inner_value">
      {{ formData[fieldId] || "--" }}
    </div>
    <el-input
      v-else
      v-model="formData[fieldId]"
      :disabled="field.options.disabled"
      :readonly="designer.designStatus ? true : field.options.readonly"
      :size="field.options.size"
      class="hide-spin-button"
      :type="inputType"
      :show-password="field.options.showPassword"
      :placeholder="field.options.placeholder"
      :clearable="field.options.clearable"
      :minlength="field.options.minLength"
      :maxlength="field.options.maxLength"
      :show-word-limit="field.options.showWordLimit"
      :prefix-icon="field.options.prefixIcon"
      :suffix-icon="field.options.suffixIcon"
      @focus="handleFocusCustomEvent"
      @blur="handleBlurCustomEvent"
      @input="handleInputCustomEvent"
      @change="handleChangeEvent"
    >
      <el-button
        v-if="field.options.appendButton"
        slot="append"
        :disabled="field.options.disabled || field.options.appendButtonDisabled"
        :class="field.options.buttonIcon"
        @click.native="emitAppendButtonClick"
      />
    </el-input>
  </form-item-wrapper>
</template>

<script>
/* eslint-disable vue/require-default-prop */
/* eslint-disable eol-last */
import FormItemWrapper from "./form-item-wrapper";
import emitter from "Yan/utils/emitter";
import fieldMixin from "./fieldMixin";

export default {
  name: "input_unit",
  componentName: "FieldWidget",
  components: {
    FormItemWrapper,
  },
  mixins: [emitter, fieldMixin],
  props: {
    designer: Object,
    fieldId: String,
    parentId: String,
    parentList: Array,
    indexOfParentList: Number,
    formData: Object,
    designState: {
      type: Boolean,
      default: false,
    },
  },
  // inject: ["refList", "formConfig", "globalOptionData", "globalModel"],
  data() {
    return {
      oldFieldValue: null, // field组件change之前的值
      // fieldModel: null,
      rules: [],
    };
  },
  computed: {
    inputType() {
      if (this.field.options.type === "number") {
        return "text"; // 当input的type设置为number时，如果输入非数字字符，则v-model拿到的值为空字符串，无法实现输入校验！故屏蔽之！！
      }
      return this.field.options.type;
    },
    // field: {
    //   cache: false,
    //   get() {
    //     // return this.designer.fieldLib[this.fieldId];
    //     return this.designer.getFieldLibUnit(this.fieldId);
    //   },
    // },
    // options: {
    //   cache: false,
    //   get() {
    //     return this.designer.getFieldLibUnit(this.fieldId).options;
    //   },
    // },
  },
  beforeCreate() {
    /* 这里不能访问方法和属性！！ */
  },

  created() {
    /* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
         需要在父组件created中初始化！！ */
    // this.initFieldModel();
    // this.registerToRefList();
    this.initEventHandler();
    this.buildFieldRules();
    this.handleOnCreated();
  },

  mounted() {
    this.handleOnMounted();
  },

  // beforeDestroy() {
  //   this.unregisterFromRefList();
  // },

  methods: {},
};
</script>

<style lang="scss" scoped>
@import "../../../../styles/global.scss"; //* form-item-wrapper已引入，还需要重复引入吗？ *//
</style>
